<template>
	<div id="app">
		<!-- <router-view></router-view> -->
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
		<img v-if="btnFlag" class="go-top" :src="Top" @click="backTop" />
	</div>
</template>

<script>
// import Home from "./pages/Home.vue";
// import Matching from "./pages/Matching.vue";

export default {
	name: "App",
	data() {
		return {
			Top: require("./assets/images/go-top.png"),
			btnFlag: true,
		};
	},
	mounted() {
		window.addEventListener("scroll", this.scrollToTop);

		// let userdata =
		// 	"98689633AAE811946C1E1FD93B5EA76F9EAD05EED15D6ED5200EB46A5E3BD5F43506AA96D9B2479588EA4EAC1BDE63265B3174E201ECAA501D65EBFB4058F561A8C16512D8B12B284531D337ADE9C7E40DA430ACB162BC4406888EEDDC1C3DFF0FAFA7D3EDFAAAFF64EFAE4AC5580839D9D7B450362275F0ABE05F1C8F0D95A7CF026A0372C3817CE3CB66073FF5873617FC91C258E289275F2541B36EB4B312";
		// this.$cookies.set("userdata", userdata);
	},
	destroyed() {
		window.removeEventListener("scroll", this.scrollToTop);
	},
	methods: {
		// 点击图片回到顶部方法，加计时器是为了过渡顺滑
		backTop() {
			const that = this;
			let timer = setInterval(() => {
				let ispeed = Math.floor(-that.scrollTop / 5);
				document.documentElement.scrollTop = document.body.scrollTop =
					that.scrollTop + ispeed;
				if (that.scrollTop === 0) {
					clearInterval(timer);
				}
			}, 16);
		},

		// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
		scrollToTop() {
			const that = this;
			let scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop;
			that.scrollTop = scrollTop;
			if (that.scrollTop > 60) {
				that.btnFlag = true;
			} else {
				that.btnFlag = false;
			}
		},
	},
	// components: {
	//   Home,
	//   Matching,
	// },
};
</script>

<style>
#app {
	/* width: 1920px;
  margin: 0 auto; */
}
.go-top {
	position: fixed;
	bottom: 50px;
	right: 50px;
	z-index: 99;
	cursor: pointer;
	width: 50px;
}
.search-ipt .el-input__inner {
	height: 100%;
	font-size: 18px;
}
.bottom-info .el-link.el-link--default {
	color: #999;
}
.change-city {
	background-color: transparent;
}
.change-city .el-input__inner {
	background-color: transparent;
	color: #fff;
	border: none;
	width: 100px;
	padding-left: 5px;
}
.el-select > .el-input {
	height: 100%;
}
.tabs-content .el-tabs__content {
	height: 600px;
	background-color: #f1f1f1;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 5px;
}
.tabs-content .el-tabs--left .el-tabs__header.is-left {
	margin-right: 0;
}
.right-menu.el-menu {
	background-color: transparent;
	border-bottom: none !important;
}
.right-menu.el-menu.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.right-menu.el-menu.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
	color: #fff;
	background-color: transparent;
}
.right-menu.el-menu--horizontal > .el-menu-item {
	color: #fff;
	background-color: transparent;
}
.right-menu.el-menu--horizontal > .el-menu-item.is-active {
	color: #fff;
	background-color: transparent;
}
.right-menu.el-menu--horizontal > .el-submenu .el-submenu__title {
	color: #fff;
	background-color: transparent;
}
.right-menu.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
	color: #fff;
	background-color: transparent;
}
.right-menu.el-menu--horizontal > .el-submenu:focus .el-submenu__title,
.el-menu--horizontal > .el-submenu:hover .el-submenu__title {
	color: #fff;
	background-color: transparent;
}
.right-menu.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
	border-color: #fff;
	border-width: 1px;
}
.right-menu.el-menu--horizontal > .el-menu-item.is-active {
	border-color: #fff;
	border-width: 1px;
}
.right-menu .el-submenu__title i {
	color: #eee;
}
/* .el-dialog{
  z-index: 999;
} */
.right-cont .el-menu.el-menu--horizontal {
	border-bottom: none;
}
.filter-part .el-form-item {
	margin-bottom: 10px;
}
.filter-part .el-form-item__label {
	font-size: 12px;
	line-height: 30px;
}
.filter-part .el-input__inner {
	font-size: 12px;
	line-height: 30px;
	height: 30px;
}
.filter-part .el-form-item__content,
.filter-part .el-cascader {
	font-size: 12px;
	line-height: 30px;
}
.filter-part .el-input__icon {
	line-height: 30px;
}
.tabs-info .el-badge__content.is-fixed {
	z-index: 9;
	top: 8px;
	right: 0;
}
</style>
